<template>
  <div>
    <el-card class="box-card" style="width: 100%; height: 15%">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="大神风采搜索">
          <el-input v-model="formInline.user" placeholder="请输入id"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handAdd">添加</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <!-- 弹出的模态框 -->
    <el-dialog
      style="text-align: center"
      title="大神风采"
      :visible.sync="dialogFormVisible"
    >
      <el-form :model="formData">
        <el-form-item label="标题" label-width="70px">
          <el-input
            v-model="formData.daTitle"
            autocomplete="off"
            style="width: 25vw"
          ></el-input>
        </el-form-item>
        <el-form-item label="大神内容" label-width="70px">
          <el-input
            v-model="formData.daEvent"
            autocomplete="off"
            style="width: 25vw"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handSave">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 数据表格 -->
    <el-table :data="tableData" style="width: 100%" border>
      <el-table-column label="Id" width="60">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="标题" width="200">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <p>标题: {{ scope.row.daTitle }}</p>
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.daTitle }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>

      <el-table-column label="大神内容" width="180">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <p>大神内容: {{ scope.row.daEvent }}</p>
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.daEvent }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" width="180">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <p>创建时间: {{ scope.row.createdTime }}</p>
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.createdTime }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import {
  GetDAShows,
  addDAShows,
  updateDAShows,
  deleteDAShows,
} from "../api/dAShows";
export default {
  data() {
    return {
      //表格的数据元
      tableData: [],
      //搜索框绑定的值
      formInline: {
        user: "",
      },
      //模态框绑定的信息
      formData: {
        daTitle: "",
        daEvent: "",
      },
      //模态框默认为不显示
      dialogFormVisible: false,
    };
  },
  mounted() {
    GetDAShows().then(({ data }) => {
      this.tableData = data.data.data;
    });
  },
  methods: {
    //编辑
    handleEdit(index, row) {
      //记录当前编辑行的下标，来实现前端页面的实时更新
      this.currentIndex = index;

      //点击编辑时将要编辑的行数据拉取过来
      this.formData.id = row.id;
      this.formData.NewsTitle = row.newsTitle;
      this.formData.NewsEvent = row.newsEvent;
      this.dialogFormVisible = true;
    },
    //添加
    handAdd() {
      //点击添加时将id制空 表示这是添加
      (this.formData.id = undefined),
        //每次添加时将模态框的数据清空
        (this.formData.daTitle = "");
      this.formData.daEvent = "";
      this.dialogFormVisible = true;
    },
    //删除
    handleDelete(index, row) {
      //删除时执行的弹框
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
            center: true,
          });
          //根据id删除指定的行
          deleteDAShows(row.id).then((data) => {
            console.log(data);
            //删除数据后重新拉取数据
            GetDAShows().then(({ data }) => {
              this.tableData = data.data.data;
              console.log(data);
            });
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
            center: true,
          });
        });
    },
    //模态框确认的事件
    handSave() {
      // 判断有没有id 有id 则是更新
      if (this.formData.id !== undefined) {
        updateDAShows(this.formData.id, this.formData).then(() => {
          this.$message({
            showClose: true,
            message: "恭喜你，编辑成功",
            type: "success",
          });
          //替换掉更新的这一行
          GetDAShows().then(({ data }) => {
            this.tableData = data.data.data;
          });
        });
      } else {
        //没有id 并且 daTitle 和 daEvent 不为空时执行添加
        if (this.formData.daTitle !== "" && this.formData.daEvent !== "") {
          addDAShows(this.formData).then(() => {
            //将数据实时更新到前端页面
            GetDAShows().then(({ data }) => {
              this.tableData = data.data.data;
            });
          });
          this.$message({
            showClose: true,
            message: "恭喜你，添加成功",
            type: "success",
          });
        } else {
          this.$message({
            showClose: true,
            message: "标题和内容不能为空",
            type: "warning",
          });
        }
      }
      this.dialogFormVisible = false;
    },
  },
};
</script>

<style>
.element.style {
  margin-left: 0px;
}

.el-dialog__footer {
  margin-right: 100px;
}

.el-dialog__body {
  align-content: center;
  justify-content: center;
  display: flex;
}
</style>